<template>
  <!--drawer-->
  <el-drawer
    ref="drawer"
    title="条件用户"
    :visible.sync="dialogData.isShow"
    direction="rtl"
    custom-class="cus-drawer"
    size="580px"
  >
    <!--表单开始 条件筛选-->
    <el-form :model="form">
      <!--第一组-->
      <el-form-item v-if="optionGroup.group1">
        <el-card class="cus-form-card" shadow="never">
          <div
            v-for="(ele, index) in form.option1"
            :key="index"
            class="cus-card-item"
          >
            <el-row :gutter="20">
              <el-col :span="10">
                <el-date-picker
                  v-model="ele.date"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                ></el-date-picker>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4">
                <el-select v-model="ele.type" placeholder="分类"></el-select>
              </el-col>
              <el-col :span="6">
                <el-select
                  v-model="ele.label"
                  placeholder="属性/行为/标签"
                ></el-select>
              </el-col>
              <el-col :span="3">
                <el-select v-model="ele.rule" placeholder="规则"></el-select>
              </el-col>
              <el-col :span="4">
                <el-input
                  v-model="ele.ruleDesc"
                  placeholder="请输入"
                ></el-input>
              </el-col>
              <el-col :span="3">
                <i
                  class="cus-iconSize el-icon-delete"
                  @click="handleDelOptions(ele.id)"
                ></i>
              </el-col>
            </el-row>
          </div>
          <el-button
            v-if="optionGroup.groupBtn1"
            icon="el-icon-plus"
            @click="handleAddOptions('group1')"
          >
            且条件
          </el-button>
        </el-card>
      </el-form-item>

      <!--第二组-->
      <div v-if="optionGroup.group2" class="cus-divider">
        或
      </div>
      <el-form-item v-if="optionGroup.group2">
        <el-card class="cus-form-card" shadow="never">
          <div
            v-for="(ele, index) in form.option2"
            :key="index"
            class="cus-card-item"
          >
            <el-row :gutter="20">
              <el-col :span="10">
                <el-date-picker
                  v-model="ele.date"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                ></el-date-picker>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4">
                <el-select v-model="ele.type" placeholder="分类"></el-select>
              </el-col>
              <el-col :span="6">
                <el-select
                  v-model="ele.label"
                  placeholder="属性/行为/标签"
                ></el-select>
              </el-col>
              <el-col :span="3">
                <el-select v-model="ele.rule" placeholder="规则"></el-select>
              </el-col>
              <el-col :span="4">
                <el-input
                  v-model="ele.ruleDesc"
                  placeholder="请输入"
                ></el-input>
              </el-col>
              <el-col :span="3">
                <i
                  class="cus-iconSize el-icon-delete"
                  @click="handleDelOptions(ele.id)"
                ></i>
              </el-col>
            </el-row>
          </div>
          <el-button
            v-if="optionGroup.groupBtn2"
            icon="el-icon-plus"
            @click="handleAddOptions('group2')"
          >
            且条件
          </el-button>
        </el-card>
      </el-form-item>

      <!--第三组-->
      <div v-if="optionGroup.group3" class="cus-divider">
        或
      </div>
      <el-form-item v-if="optionGroup.group3" class="cus-grup--bottom">
        <el-card class="cus-form-card" shadow="never">
          <div
            v-for="(ele, index) in form.option3"
            :key="index"
            class="cus-card-item"
          >
            <el-row :gutter="20">
              <el-col :span="10">
                <el-date-picker
                  v-model="ele.date"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                ></el-date-picker>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4">
                <el-select v-model="ele.type" placeholder="分类"></el-select>
              </el-col>
              <el-col :span="6">
                <el-select
                  v-model="ele.label"
                  placeholder="属性/行为/标签"
                ></el-select>
              </el-col>
              <el-col :span="3">
                <el-select v-model="ele.rule" placeholder="规则"></el-select>
              </el-col>
              <el-col :span="4">
                <el-input
                  v-model="ele.ruleDesc"
                  placeholder="请输入"
                ></el-input>
              </el-col>
              <el-col :span="3">
                <i
                  class="cus-iconSize el-icon-delete"
                  @click="handleDelOptions(ele.id)"
                ></i>
              </el-col>
            </el-row>
          </div>
          <el-button
            v-if="optionGroup.groupBtn3"
            icon="el-icon-plus"
            @click="handleAddOptions('group3')"
          >
            且条件
          </el-button>
        </el-card>
      </el-form-item>

      <!--添加条件按钮-->
      <el-form-item label>
        <el-button
          v-if="isShowAddBtn"
          type="warning"
          class="cus-form-btn"
          icon="el-icon-plus"
          plain
          @click="handleAddRow"
        >
          或条件
        </el-button>
      </el-form-item>
    </el-form>

    <!--底部菜单组-->
    <div class="cus-drawer_footer">
      <div class="cus-btns">
        <el-button type="success" plain @click="handleClose">
          取消
        </el-button>
        <el-button type="success" @click="handleSubmit">
          确认
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'conditionDrawer',
  msg: '属性管理/条件用户',
  props: ['dialogData'],
  data() {
    return {
      index: 0, // 模拟下标
      dialog: false,
      isShowModal: true,
      operStatu: true,
      isShowAddBtn: true,
      // 编辑/添加
      deffer: '',
      form: {
        name: '',
        desc: '',
        option1: [],
        option2: [],
        option3: []
      },
      // 条件组状态
      optionGroup: {
        groupNum: 0, // 计数器
        group1: false,
        groupBtn1: true,
        group2: false,
        groupBtn2: true,
        group3: false,
        groupBtn3: true
      }
    }
  },
  methods: {
    // 取消
    handleClose() {
      this.dialogData.isShow = false
    },
    // 确认筛选条件
    handleSubmit() {
      this.dialogData.isShow = false
    },
    // 控制条件组
    handleAddRow() {
      this.optionGroup.groupNum += 1

      if (this.optionGroup.groupNum >= 3) {
        this.isShowAddBtn = false
      }
      if (this.optionGroup.group1 === false) {
        this.optionGroup.group1 = true
      } else if (this.optionGroup.group2 === false) {
        this.optionGroup.group2 = true
      } else if (this.optionGroup.group3 === false) {
        this.optionGroup.group3 = true
      }
    },
    // 添加条件项
    handleAddOptions(type) {
      switch (type) {
        case 'group1':
          this.form.option1.push({
            id: this.index++,
            type: '',
            label: '',
            rule: '',
            ruleDesc: ''
          })
          if (this.form.option1.length >= 3) {
            this.optionGroup.groupBtn1 = false
          }
          break
        case 'group2':
          this.form.option2.push({
            id: this.index++,
            type: '',
            label: '',
            rule: '',
            ruleDesc: ''
          })

          if (this.form.option2.length >= 3) {
            this.optionGroup.groupBtn2 = false
          }
          break
        case 'group3':
          this.form.option3.push({
            id: this.index++,
            type: '',
            label: '',
            rule: '',
            ruleDesc: ''
          })
          if (this.form.option3.length >= 3) {
            this.optionGroup.groupBtn3 = false
          }
          break
      }
    }
  }
}
</script>

<style lang="less">
.cus-drawer {
  //自定义样式
  .el-drawer__body {
    overflow-y: scroll;
  }
  .el-drawer__header {
    border-bottom: 1px solid #dcdfe6;
    padding: 10px;
    font-size: 15px;
    font-weight: 600;
  }
  .cus-form-item {
    margin-left: 20px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    color: #0d1636;
    font-weight: 600;
    padding-left: 3px;
    border-left: 3px solid #1dc8a4;
  }
  .cus-divider {
    position: relative;
    left: 30px;
    top: -5px;
    color: #606266;
  }
  .cus-grup--bottom {
    margin-bottom: 50px;
  }
  .cus-form-card {
    margin-top: 10px;
    background-color: #f2f4f5;
    .cus-card-item {
      margin-top: 20px;
    }
    .el-button {
      margin-top: 10px;
      padding: 8px 15px;
      border-radius: 2px;
      font-family: 'Microsoft YaHei';
      font-size: 14px;
    }
    .cus-iconSize {
      color: #99a9bf;
      font-size: 20px;
      &:hover {
        cursor: pointer;
        color: #0d1636;
      }
    }
  }
  .cus-form-btn {
    margin: 20px 10px;
    width: 100px;
    padding: 8px;
  }
  .el-form-item {
    margin-left: 20px;
    margin-right: 20px;
  }
  .cus-form-switch {
    margin: 20px 10px;
    margin-bottom: 60px;
  }
  .cus-drawer_footer {
    width: 100%;
    height: 60px;
    line-height: 60px;
    position: absolute;
    bottom: 0;
    border-top: 1px solid #dcdfe6;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    .cus-btns {
      margin-right: 30px;
    }
    .el-button {
      height: 32px;
      width: 100px;
      border-radius: 2px;
      font-family: 'Microsoft YaHei';
      font-size: 14px;

      &.el-button--primary {
        background-color: #1dc8a4;
        border-color: #1dc8a4;

        &:hover {
          background-color: rgba(29, 200, 164, 0.8);
        }
      }

      &.el-button--default {
        &:hover {
          border-color: #1dc8a4;
          background-color: rgba(29, 200, 164, 0.8);
          color: #fff;
        }
      }
    }
  }
  //相关el样式
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
}
</style>
